import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible' // 移动端适配
import 'highlight.js/styles/default.css'

import './VueVant.js' // 引入vant组件

Vue.config.productionTip = false

// 封装中间件函数插件
const directiveObj = {
  install(Vue) {
    // 自定义指令
    Vue.directive('fofo', {

      inserted(el) {
        // 标签可能在组件创建前就调用，导致调用失败，加个延时器解决问题
        setTimeout(() => {
          // 引用的组件，而input在div封装的里面，获取不到input textarea
        // 判断el中的标签类型
          if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          // const input = el.querySelector('input')
            el.focus()
          // input.focus()
          } else { // el本身不是输入框尝试获取
            const input = el.querySelector('input')
            const textarea = el.querySelector('textarea')
            // 判断：不一定获取得到，需要判断是否有值，有值在执行focus()
            if (input) input.focus()
            if (textarea) textarea.focus()
          }
        }, 500)
      },
      update(el) { // 指令所在标签，被更新时候触发
        setTimeout(() => {
          if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
            // const input = el.querySelector('input')
            el.focus()
            // input.focus()
          } else { // el本身不是输入框尝试获取
            const input = el.querySelector('input')
            const textarea = el.querySelector('textarea')
            // 判断：不一定获取得到，需要判断是否有值，有值在执行focus()
            if (input) input.focus()
            if (textarea) textarea.focus()
          }
        }, 500)
      }
    })
  }
}
Vue.use(directiveObj)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
